<template>
  <div class="px-1">
    <div v-if="active === '专家库'" class="w-100 h-100 d-flex flex-column">
      <custom-radio-tag1 class="mb-1 w-100" :list="tagList" :value="typeIndex" is-scroll @change="tagChange" />
      <div class="listInner bg-white">
        <div v-if="type === '基本信息'"><commonBaseInfo /></div>
        <div v-else-if="type === '考核记录'" class="px-1">
          <custom-title :is-line="true" title="考核记录" />
          <div v-if="examListLoad" class="align_center">
            <van-loading type="spinner" vertical />
          </div>
          <div v-else-if="examListData && examListData.length>0" class="common_list" style="padding: 0">
            <div v-for="(item, index) in examListData" :key="index" class="list_item">
              <div class="content_area">
                <div class="number_order">{{ index + 1 }}</div>
                <div class="right_content">
                  <div class="content_title" style="max-width: 100%">
                    {{ item.examYear }}
                  </div>
                  <ul>
                    <li>
                      <i class="iconfont c-text-color1">&#xe629;</i>
                      <div class="label">考核得分：</div>
                      <div class="value">{{ item.examScore }}</div>
                    </li>
                    <li>
                      <i class="iconfont c-text-color2">&#xe685;</i>
                      <div class="label">考核时间：</div>
                      <div class="value">{{ item.examTime }}</div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <el-empty v-else description="暂无考核记录" />
        </div>
        <div v-else-if="type === '任务执行记录'" class="px-1">
          <div>
            <custom-title :is-line="true" title="隐患排查任务" />
            <!-- <div v-if="taskLoad" class="align_center">
              <van-loading type="spinner" vertical />
            </div> -->
            <div v-if="taskList && taskList.length>0" class="common_list" style="padding: 0">
              <div v-for="(item, index) in taskList" :key="index" class="list_item" @click="openDangerTaskDialog(item)">
                <div class="content_area">
                  <div class="number_order">{{ index + 1 }}</div>
                  <div class="right_content">
                    <div class="content_title" style="max-width: 100%">
                      {{ item.checkPlanName }}
                      <van-tag v-if="item.item6" class="ml-1" plain type="success " style="display: block">{{ item.finishStatus }}</van-tag>
                    </div>
                    <ul>
                      <li>
                        <i class="iconfont c-text-color1">&#xe725;</i>
                        <div class="label">企业名称：</div>
                        <div class="value">{{ item.companyName }}</div>
                      </li>
                      <li>
                        <i class="iconfont c-text-color2">&#xe634;</i>
                        <div class="label">年份：</div>
                        <div class="value">{{ item.dataYear }}</div>
                      </li>
                      <li>
                        <i class="iconfont c-text-color3">&#xe664;</i>
                        <div class="label">评分时间：</div>
                        <div class="value">{{ item.checkTime }}</div>
                      </li>
                      <li>
                        <i class="iconfont c-text-color4">&#xe664;</i>
                        <div class="label">所属检查计划名称：</div>
                        <div class="value">{{ item.checkPlanName }}</div>
                      </li>
                      <li>
                        <i class="iconfont c-text-color5">&#xe617;</i>
                        <div class="label">计划检查开始日期：</div>
                        <div class="value">{{ item.checkStartTime }}</div>
                      </li>
                      <li>
                        <i class="iconfont c-text-color6">&#xe617;</i>
                        <div class="label">计划检查结束日期：</div>
                        <div class="value">{{ item.checkEndTime }}</div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <el-empty v-else description="暂无任务执行记录" />
            <customLoadmore v-if="taskList && taskList.length>0" ref="customLoadmore" :page-num="taskForm.pageNum" :pages="taskPages" @load="handlePages" />
          </div>
          <div>
            <custom-title :is-line="true" title="专项任务" />
            <div v-if="InformationLoad" class="align_center">
              <van-loading type="spinner" vertical />
            </div>
            <div v-else-if="InformationList && InformationList.length>0" class="common_list" style="padding: 0">
              <div v-for="(item, index) in InformationList" :key="index" class="list_item">
                <div class="content_area" @click="goDetail(item)">
                  <div class="number_order">{{ index + 1 }}</div>
                  <div class="right_content">
                    <div class="content_title" style="max-width: 100%">
                      {{ item.informationName }}
                      <van-tag v-if="item.completeStateName" class="ml-1" plain type="success " style="display: block">{{ item.completeStateName }}</van-tag>
                    </div>
                    <ul>
                      <li>
                        <i class="iconfont c-text-color1">&#xe60d;</i>
                        <div class="label">交付时限：</div>
                        <div class="value">{{ item.enterTime }}</div>
                      </li>
                      <li>
                        <i class="iconfont c-text-color2">&#xe617;</i>
                        <div class="label">所属专项任务名称：</div>
                        <div class="value">{{ item.informationName }}</div>
                      </li>
                      <li>
                        <i class="iconfont c-text-color3">&#xe617;</i>
                        <div class="label">提交日期：</div>
                        <div class="value">{{ item.compileTime }}</div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <customLoadmore
                ref="customTaskLoadmore"
                :page-num="form.pageNum"
                :pages="pages"
                @load="handleTaskPages"
              />
            </div>
            <el-empty v-else description="暂无专项任务" />
          </div>
        </div>
        <div v-else-if="type === '聘任与荣誉'" class="px-1">
          <custom-title :is-line="true" title="聘任记录" />
          <div v-if="ExpertLoad" class="align_center">
            <van-loading type="spinner" vertical />
          </div>
          <div v-else-if="employList && employList.length>0" class="common_list" style="padding: 0">
            <div v-for="(item, index) in employList" :key="index" class="list_item">
              <div class="content_area">
                <div class="number_order">{{ index + 1 }}</div>
                <div class="right_content">
                  <div class="content_title" style="max-width: 100%">
                    {{ item.specialityName }}
                  </div>
                  <ul>
                    <li>
                      <i class="iconfont c-text-color1">&#xe634;</i>
                      <div class="label">属性类别：</div>
                      <div class="value">{{ item.expertAttributeList.map(val=>val.expertattributename).join(',') }}</div>
                    </li>
                    <li>
                      <i class="iconfont c-text-color2">&#xe634;</i>
                      <div class="label">专业类别：</div>
                      <div class="value">{{ item.professionTypeName }}</div>
                    </li>
                    <li>
                      <i class="iconfont c-text-color3">&#xe617;</i>
                      <div class="label">聘任日期：</div>
                      <div class="value">{{ item.employTime }}</div>
                    </li>
                    <li>
                      <i class="iconfont c-text-color4">&#xe617;</i>
                      <div class="label">到期日期：</div>
                      <div class="value">{{ item.employEndTime }}</div>
                    </li>
                    <li>
                      <i class="iconfont c-text-color5">&#xe677;</i>
                      <div class="label">聘任材料：</div>
                      <div class="value">
                        <el-link type="primary" @click="openAttachPopUp(item.fileList)">
                          查看
                        </el-link>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <el-empty v-else description="暂无聘任记录" />
          <custom-title :is-line="true" title="解聘记录" />
          <div v-if="dismissLoad" class="align_center">
            <van-loading type="spinner" vertical />
          </div>
          <div v-else-if="dismissList && dismissList.length>0" class="common_list" style="padding: 0">
            <div v-for="(item, index) in dismissList" :key="index" class="list_item">
              <div class="content_area">
                <div class="number_order">{{ index + 1 }}</div>
                <div class="right_content">
                  <div class="content_title" style="max-width: 100%">
                    {{ item.item1 }}
                  </div>
                  <ul>
                    <li>
                      <i class="iconfont c-text-color1">&#xe67a;</i>
                      <div class="label">解聘原因：</div>
                      <div class="value">{{ item.reason }}</div>
                    </li>
                    <li>
                      <i class="iconfont c-text-color2">&#xe617;</i>
                      <div class="label">解聘日期：</div>
                      <div class="value">{{ item.dismissTime }}</div>
                    </li>
                    <li>
                      <i class="iconfont c-text-color3">&#xe677;</i>
                      <div class="label">解聘材料：</div>
                      <div class="value">
                        <el-link type="primary" @click="openAttachPopUp(item.fileList)">
                          查看
                        </el-link>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <el-empty v-else description="暂无解聘记录" />
          <custom-title :is-line="true" title="表彰记录" />
          <div v-if="honorLoad" class="align_center">
            <van-loading type="spinner" vertical />
          </div>
          <div v-else-if="honorList && honorList.length>0" class="common_list" style="padding: 0">
            <div v-for="(item, index) in honorList" :key="index" class="list_item">
              <div class="content_area">
                <div class="number_order">{{ index + 1 }}</div>
                <div class="right_content">
                  <div class="content_title" style="max-width: 100%">
                    {{ item.item1 }}
                  </div>
                  <ul>
                    <li>
                      <i class="iconfont c-text-color1">&#xe67a;</i>
                      <div class="label">表彰内容：</div>
                      <div class="value">{{ item.content }}</div>
                    </li>
                    <li>
                      <i class="iconfont c-text-color2">&#xe617;</i>
                      <div class="label">表彰日期：</div>
                      <div class="value">{{ item.honorDate }}</div>
                    </li>
                    <li>
                      <i class="iconfont c-text-color3">&#xe677;</i>
                      <div class="label">表彰材料：</div>
                      <div class="value">
                        <el-link type="primary" @click="openAttachPopUp(item.fileList)">
                          查看
                        </el-link>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <el-empty v-else description="暂无表彰记录" />
        </div>
      </div>
    </div>
    <div v-else>
      <commonBaseInfo />
    </div>
    <attachPopUp ref="attachPopUp" />
    <danger-tasks module-name="安全" :danger-task-dialog.sync="dangerTaskDialog" :check-task-data="checkTaskData" />
  </div>
</template>

<script>
import commonBaseInfo from './commonBaseInfo.vue'
import {
  AqGetExpertInformationList,
  ExpertDismissList,
  ExpertEmployList,
  ExpertExamRecord,
  ExpertHonorList,
  ExpertTaskList
} from '@/api/commonPage/personnel'
import commonList from '@/assets/mixin/commonList'
import DangerTasks from '@/views/staging/commom/personnel/dangerTasks.vue'

export default {
  components: { DangerTasks, commonBaseInfo },
  mixins: [commonList],
  data() {
    return {
      form: {
        pageNum: 1,
        pageSize: 10
      },
      type: '基本信息',
      typeIndex: 0,
      id: -10,
      current: '',
      active: '',
      listData: [
        { item1: '2023', item2: '95', item3: '2023-12-06' },
        { item1: '2023', item2: '95', item3: '2023-12-06' },
        { item1: '2023', item2: '95', item3: '2023-12-06' },
        { item1: '2023', item2: '95', item3: '2023-12-06' },
        { item1: '2023', item2: '95', item3: '2023-12-06' },
        { item1: '2023', item2: '95', item3: '2023-12-06' },
        { item1: '2023', item2: '95', item3: '2023-12-06' }
      ],
      examListData: [],
      taskList: [],
      employList: [],
      dismissList: [],
      honorList: [],
      InformationList: [],
      tagList: [
        { label: '基本信息' },
        { label: '考核记录' },
        { label: '任务执行记录' },
        { label: '聘任与荣誉' }
        // { label: '专项任务' }
      ],
      clickNum1: 1,
      clickNum2: 1,
      clickNum3: 1,
      honorLoad: true,
      dismissLoad: true,
      ExpertLoad: true,
      taskLoad: true,
      InformationLoad: true,
      examListLoad: true,
      taskForm: {
        pageNum: 1,
        pageSize: 10,
        expertId: ''
      },
      dangerTaskDialog: false,
      checkTaskData: {},
      taskTotal: 0,
      taskPages: 0
    }
  },
  async created() {
    // this.layout.showLoading()
    console.log(this.$route.query)
    const { current, id, active, type } = this.$route.query
    this.id = id || ''
    this.taskForm.expertId = id
    this.current = current || ''
    this.active = active || ''
    if (type) {
      this.type = type
      this.typeIndex = this.tagList.findIndex(val => val.label === type)
    }
    this.init()
    if (this.active === '专家库') {
      this.ExpertTaskList()
    }
    // this.layout.hideLoading()
  },
  methods: {
    goDetail(row) {
      console.log(row)
      this.$router.push({
        path: '/staging/specialTasksDetailes',
        query: { specialTaskId: row.expertInformationId, ...this.$route.query, type: this.type, currentType: '生产' }
      })
    },
    openDangerTaskDialog(row) {
      this.dangerTaskDialog = true
      console.log(row)
      this.checkTaskData = row
    },
    async tagChange(tagArg) {
      const { label } = tagArg.item
      this.type = label
      if (label === '考核记录' && this.clickNum1 === 1) {
        const { data: examData, status: examStatus } = await ExpertExamRecord({ expertId: this.id })
        if (examData.list && examStatus === 0) {
          this.examListLoad = false
          this.examListData = examData.list
        }
        this.clickNum1 = 2
      } else if (label === '任务执行记录' && this.clickNum2 === 1) {
        this.clickNum2 = 2
      } else if (label === '聘任与荣誉' && this.clickNum3 === 1) {
        const { data: ExpertData, status: ExpertStatus } = await ExpertEmployList({ expertId: this.id })
        if (ExpertData && ExpertStatus === 0) {
          this.ExpertLoad = false
          this.employList = ExpertData
        }
        const { data: DismissData, status: DismissStatus } = await ExpertDismissList({ expertId: this.id })
        if (DismissData && DismissStatus === 0) {
          this.dismissLoad = false
          this.dismissList = DismissData
        }
        const { data: HonorData, status: HonorStatus } = await ExpertHonorList({ expertId: this.id })
        if (HonorData && HonorStatus === 0) {
          this.honorLoad = false
          this.honorList = HonorData
        }
        this.clickNum3 = 2
      }
    },
    async init() {
      if (this.$refs.customTaskLoadmore) {
        this.$refs.customTaskLoadmore.loadStatus = true
      }
      const { data: InformationData, status: InformationStatus } = await AqGetExpertInformationList({ expertId: this.id, completeStateName: '', pageSize: this.form.pageSize, pageNum: this.form.pageNum })
      if (InformationData && InformationStatus === 0) {
        this.InformationLoad = false
        this.InformationList = this.InformationList.concat(InformationData.list)
      }
      if (this.$refs.customTaskLoadmore) {
        this.$refs.customTaskLoadmore.loadStatus = false
      }
    },
    // 分页
    handleTaskPages(value) {
      this.form.pageNum = value
      this.init()
    },
    async ExpertTaskList() {
      if (this.$refs.customLoadmore) {
        this.$refs.customLoadmore.loadStatus = true
      }

      const { data: taskData, status: taskStatus } = await ExpertTaskList(this.taskForm)
      if (taskData.list && taskStatus === 0) {
        this.taskList = this.taskList.concat(taskData.list)
        this.taskTotal = taskData.total
        this.taskPages = taskData.pages
      }
      if (this.$refs.customLoadmore) {
        this.$refs.customLoadmore.loadStatus = false
      }
    },
    // 分页
    handlePages(value) {
      this.taskForm.pageNum = value
      this.ExpertTaskList()
    }
  }
}
</script>

<style lang="scss" scoped>

.align_center {
  text-align: center;
  padding: 40px 0;
}
</style>
